<template>
  <div class="grid-cell" :class="[customClass]"
       :style="[containerStyle]"
       v-show="!widget.options.hidden">
    <template v-if="!!widget.widgetList && (widget.widgetList.length > 0)">
      <template v-for="(subWidget, swIdx) in widget.widgetList">
        <template v-if="'container' === subWidget.category">
          <component style="flex:1" :is="getComponentByContainer(subWidget)" :widget="subWidget" :key="swIdx">
            <!-- 递归传递插槽！！！ -->
            <template v-for="slot in Object.keys($slots)" v-slot:[slot]="scope">
              <slot :name="slot" v-bind="scope" />
            </template>
          </component>
        </template>
        <template v-else>
          <component style="flex:1" :is="subWidget.type + '-widget'" :field="subWidget" :designer="null" :key="swIdx">
            <!-- 递归传递插槽！！！ -->
            <template v-for="slot in Object.keys($slots)" v-slot:[slot]="scope">
              <slot :name="slot" v-bind="scope" />
            </template>
          </component>
        </template>
      </template>
    </template>
    <template v-else>
      <el-col>
        <div class="blank-cell"><span class="invisible-content">{{ i18nt('render.hint.blankCellContent') }}</span></div>
      </el-col>
    </template>
  </div>
</template>

<script>
import emitter from '@/utils/emitter'
import i18n from '../../../utils/i18n'
import refMixin from '../../../components/form-render/refMixin'
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
import { traverseFieldWidgetsOfContainer } from '@/utils/util'

export default {
  name: 'GridColItem',
  componentName: 'ContainerItem',
  mixins: [emitter, i18n, refMixin],
  components: {
    ...FieldComponents,
  },
  props: {
    widget: Object,
  },
  inject: ['refList', 'globalModel', 'getFormConfig', 'previewState'],
  computed: {
    formConfig() {
      return this.getFormConfig()
    },

    customClass() {
      return this.widget?.options?.customClass || ''
    },
    containerStyle() {
      return this.widget?.options?.containerStyle
    },
  },
  created() {
    // this.initLayoutProps()
    this.initRefList()
    this.callSetHidden()
  },
  methods: {
    /* 主动触发setHidden()方法，以清空被隐藏容器内字段组件的校验规则！！ */
    callSetHidden() {
      if (this.widget?.options?.hidden === true) {
        this.setHidden(true)
      }
    },

    setHidden(flag) {
      this.widget.options.hidden = flag

      /* 容器被隐藏后，需要同步清除容器内部字段组件的校验规则 */
      let clearRulesFn = (fieldWidget) => {
        let fwName = fieldWidget.options.name
        let fwRef = this.getWidgetRef(fwName)
        if (flag && !!fwRef && !!fwRef.clearFieldRules) {
          fwRef.clearFieldRules()
        }

        if (!flag && !!fwRef && !!fwRef.buildFieldRules) {
          fwRef.buildFieldRules()
        }
      }

      traverseFieldWidgetsOfContainer(this.widget, clearRulesFn)
    },

  },
}
</script>

<style lang="scss" scoped>
.blank-cell {
  font-style: italic;
  color: #cccccc;

  span.invisible-content {
    opacity: 0;
  }
}
</style>
